<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/dateplay.css">
</head>
<body>
<div style="width: 90%;position: absolute;bottom: 0;height: 36px;left: 5%;">
    <div id="dateline">
    </div>
</div>
<script src="../../libs/jquery/jquery-3.1.1.min.js"></script>
<script src="js/jquery.extend.timeline.js"></script>
<script>
    var dates = [
        "20171213",
        "20171214",
        "20171215",
        "20171216",
        "20171217",
        "20171218",
        "20171219",
        "20171220",
        "20171221",
        "20171222"
    ];

    var times = {};
    for(var i=0;i<dates.length;i++){
        var _date = dates[i];
        var _times = [];
        var hCount = 24;
        for(var j=0;j<hCount;j++){
            var _time = _date;
            _time+=j>9?j+"00":"0"+j+"00";
            _times.push(_time);
        }
        times[_date] = _times;
    }
    var dateline = $("#dateline").TimeLine({
        times:times,
        interval:200,
        callback:function(date){
            var dateStr = date.format("yyyy-MM-dd hh:00");
            console.log(dateStr);
        }
    });
</script>
</body>
</html>